<!-- <template>
	<view class="">
		<u-navbar :is-back="true" :custom-back="goBack" back-text="" title="充电线">
		</u-navbar>
		<view class="">
			<view class="" style="text-align: center;margin-top: 4rem;">
				<image style="width: 10rem; height: 8rem;" src="../../style/image/my/A28.png" alt="" />
				<view style="color: #999999; font-size: 0.65rem; padding: 2rem">
					当前暂无数据
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="js">
</script>

<style lang="scss" scoped>
	page{
		background-color: #F3F5F7;
	}
</style>
 -->
<template>
	<view>
		<view :change:msg="renderScript.receiveMsg" class="renderjs" id="poster">
			<view class="">
				文字
			</view>
			<image src="https://kitty-prod.oss-cn-hangzhou.aliyuncs.com/kitty-prod_ccc608e5355a4db392ce86eb60d9d188.jpg" mode=""></image>
		</view>
		<button @click="renderScript.emitData">生成海报</button>

		<view class="poster-view">
			<image :src="base64" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				base64: ''
			};
		},
		methods: {
			// 接收renderjs发回的数据
			receiveRenderData(val) {
				this.base64 = val
			}
		}
	};
</script>

<script module="renderScript" lang="renderjs">
	import html2canvas from 'html2canvas';
	export default {
		data() {
			return {

			}
		},
		mounted() {},
		methods: {
			// 发送数据到逻辑层
			emitData(e, ownerVm) {
				const dom = document.getElementById('poster')
				html2canvas(dom, {
					width: dom.clientWidth, //dom 原始宽度
					height: dom.clientHeight,
					scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
					scrollX: 0,
					useCORS: true, //支持跨域，但好像没什么用
				}).then((canvas) => {
					// 将生产的canvas转为base64图片3
					ownerVm.callMethod('receiveRenderData', canvas.toDataURL('image/png'))
				});

			}
		}
	};
</script>
<style>
	/* .poster-view {
		background: #007AFF;
		margin-top: 100rpx;
	} */
</style>
